<template>
  <u-popup v-model="show" mode="center" border-radius="14" width="540">
    <view class="pintuan-wrap">
      <view class="header-title u-border-bottom">正在拼团</view>
      <view class="list u-border-bottom">
        <scroll-view scroll-y="true" class="scroll">
          <view class="item" v-for="item in pintuanList" :key="item.id">
            <u-avatar size="72" :src="item.current_user_avatar_url"></u-avatar>
            <view>
              <view class="scope"
                >还差{{ item.total_num - item.join_num }}人</view
              >
              <view class="time">
                剩余
                <u-count-down
                  :timestamp="item.expiry_countdown"
                  height="36"
                  separator-size="20"
                  separator-color="#909399"
                  font-size="20"
                  color="#909399"
                ></u-count-down>
              </view>
            </view>
            <view class="btn" @click="handleJoinPintuan(item.id)">去拼团</view>
          </view>
          <edu-empty
            v-if="$u.test.empty(pintuanList)"
            text="暂无拼团~"
          ></edu-empty>
        </scroll-view>
      </view>
      <view class="bottom"
        ><view class="btn" @click="handleCreatePintuan">发起拼团</view></view
      >
    </view>
  </u-popup>
</template>

<script>
// 获取当前页面的参数
import getCurPage from "@/utils/getCurPage.js";
import { mapGetters } from "vuex";
export default {
  props: {
    visible: Boolean,
    promotion: Object,
  },
  data() {
    return {
      show: false,
      pintuanList: [],
      options: {},
    };
  },
  watch: {
    show(n) {
      this.$emit("update:visible", n);
    },
    visible(n) {
      this.show = n;
      if (n) this.getPintuanList();
    },
  },
  computed: {
    ...mapGetters({
      globPrimary: "designSetting/getGlobTheme",
      globPrimaryColor: "designSetting/getGlobThemeColor",
    }),
  },
  mounted() {
    this.options = getCurPage();
  },
  methods: {
    // 请求拼团列表
    getPintuanList() {
      this.$edu.api
        .getPromotionPintuanList({
          promotion_id: this.promotion.id,
        })
        .then((res) => {
          this.pintuanList = res.data;
        });
    },
    // 发起拼团
    handleCreatePintuan() {
      this.$edu.api
        .postPromotionPintuanCreate({
          promotion_id: this.promotion.id,
        })
        .then((res) => {
          this.$u.route("/pageCourse/cart/course", {
            id: this.options.id,
            promotion_id: this.promotion.id,
          });
        });
    },
    // 加入拼团
    handleJoinPintuan(id) {
      this.$edu.api
        .postPromotionPintuanJoin({
          tuan_id: id,
        })
        .then((res) => {
          this.$u.route("/pageCourse/cart/course", {
            id: this.options.id,
            redirect_type: "pintuan",
            promotion_id: this.promotion.id,
          });
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.pintuan-wrap {
  .header-title {
    padding: 28rpx 0;
    font-size: 36rpx;
    font-weight: 400;
    color: $edu-main-color;
    text-align: center;
  }
  .list {
    height: 500rpx;
    padding: 12rpx 30rpx;
    .scroll {
      height: 100%;
    }
    .item {
      padding: 16rpx 0;
      display: flex;
      align-items: center;
      .u-avatar {
        margin-right: 18rpx;
      }
      .scope {
        font-size: 26rpx;
        font-weight: 400;
        color: $edu-main-color;
      }
      .time {
        font-size: 20rpx;
        font-weight: 400;
        color: $edu-tips-color;
      }
      .btn {
        margin-left: auto;
        padding: 8rpx 20rpx;
        font-size: 26rpx;
        font-weight: 400;
        color: #ffffff;
        background: #ff8a52;
        border-radius: 4rpx;
      }
    }
  }
  .bottom {
    padding: 30rpx;
    .btn {
      padding: 12rpx 0;
      font-size: 30rpx;
      font-weight: 400;
      text-align: center;
      color: #ffffff;
      background: #ff8a52;
      border-radius: 4rpx;
    }
  }
}
</style>
